<template>
    <div>
        <div class="loading" v-if="loading">
            <van-loading size="30px" vertical v-if="loading">
            <label style="color: white;">正在上传信息...</label>
            </van-loading>
        </div>

        <van-nav-bar title="身份证上传" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div style="height: 20px;"></div>
        <div style="width: 100%; display: flex;justify-content: center;align-items: center;">
            <div style="margin-top: 20rpx;">
                <!-- <van-uploader preview-size="100" :upload-text="labels[fileImgCards.length]" multiple max-count="2"
                    v-model="fileImgCards" :deletable="true" /> -->
                <van-uploader preview-size="100" :upload-text="labels[fileImgCards.length]" max-count="2"
                    v-model="fileImgCards" :deletable="true" />
            </div>
        </div>
        <van-cell-group :border="false">
            <van-cell title="提示" label="请上传有效身份证件的正、反面照片！" :border="false" />
        </van-cell-group>

        <div style="width: 100%;display: flex;align-items: center;justify-content: center;margin-top: 20rpx;">
            <div style="width: 95%;margin-bottom: 50rpx;">
                <van-button round type="info" size="large" @click="formSubmit">完成</van-button>
            </div>
        </div>
        <van-dialog v-model:show="showDialog" title="提示" show-cancel-button @confirm="confirmDialog">
            <div style="height: 50px; display: flex;justify-content: center;align-items: center;margin: 15px;">
                <label>{{ hint }}</label>
            </div>
        </van-dialog>

    </div>
</template>
  
<script>
import { PROJECT_API_URL } from '@/services/baseURL'
import { Toast } from 'vant'

export default {
    name: 'Idcard',
    components: {

    },
    data() {

        return {
            // fileImgs: [],
            fileImgCards: [],
            fileImgList: [],
            labels: ["身份证正面", "身份证反面"],
            showDialog: false,
            hint: '',
            datainfo: {},
            loading: false
        }
    },
    methods: {
        onClickLeft() {
            // history.back();
            this.$router.back();
            // this.$router.push({
            //     name: 'Faceimg',
            //     params: { fileImgList: this.fileImgList, fileImgCards: this.fileImgCards },
            // })
        },
        // afterRead(file, detail) {
        //     var fileImgCards = this.fileImgCards
        //     fileImgCards.push(file)
        //     this.fileImgCards = fileImgCards
        //     console.log(file, detail);
        // },
        // deleteImg(file, detail) {
        //     var fileImgCards = this.fileImgCards
        //     fileImgCards.splice(detail.index, 1)
        //     this.fileImgCards = fileImgCards
        //     console.log(fileImgCards);
        // },
        formSubmit() {
            var that = this
            var data = JSON.parse(window.sessionStorage.getItem('datainfo'))
            var fileImgList = this.fileImgList
            var fileImgCards = this.fileImgCards

            var hint = ''
            if (data.infoCheck < "2") {

                Toast('不可重复提交！')
                return
            }

            for (const [key, value] of Object.entries(data)) {
                console.log(key, value);
                if (value.trim() === "") {
                    hint = "系统出错啦，请返回首页将信息填写完整！"
                }
            }

            if (fileImgList.length < 3) {
                hint = '系统出错啦，请返回上一页重新上传3张照片！'

            }
            if (fileImgCards.length < 2) {
                hint = '请上传有效身份证件的正、反面照片！'

            }
            if (hint != '') {
                Toast(hint)
                return
            }
            data.infoCheck = "0"
            data.remark = '无'

            this.datainfo = data
            this.hint = '确认信息无误？'
            this.showDialog = true

        },
        confirmDialog() {
            var data = this.datainfo
            this.showDialog = false
            // this.loading = true
            this.uploadInfo(data)

        },
        async uploadInfo(data) {

            window.sessionStorage.setItem('datainfo', JSON.stringify(data))

            var res1 = await this.$api.user.updateOrInsertInfo(data)

            var openid = res1.data.user.openid;
            var path = res1.data.userImg.path

            var fileImgList = this.fileImgList
            var fileImgCards = this.fileImgCards
            console.log(fileImgList);

            if (res1.code != '200') {
                Toast('系统繁忙，请重试！')
                console.log(res1)
                return
            }
            this.loading = true
            // let loading = this.$loading({
            //     lock: true, // 显示/隐藏--默认为false
            //     text: "加载中，请稍候...", //显示在加载图标下方的加载文案
            //     background: "rgba(0,0,0,0.8)", //遮罩层颜色
            //     spinner: "el-icon-loading", //自定义加载图标类名
            // });

            var url = '/user/img/upload'
            var params = new FormData()
            params.append('file', 'file')
            params.append('openid', openid)
            params.append('path', path)
            fileImgList.forEach((item, index) => {
                var file = item.file
                params.append('file', file)
                // console.log(params.get('file'));
            })
            await this.$api.user.uploadImg(url, params)
            url = '/user/img/upload/card'
            params = new FormData()
            params.append('file', 'file')
            params.append('openid', openid)
            params.append('path', path)

            fileImgCards.forEach((item, index) => {
                var file = item.file
                params.append('file', file)
                // console.log(params.get('file'));
            })
            await this.$api.user.uploadImg(url, params)
            // Toast('信息上传成功，等待管理员审核')
            this.loading = false
            this.$router.push({
                name: 'StatusUpload',
                params: { fileImgList: this.fileImgList, fileImgCards: this.fileImgCards },
            })
            // loading.close();
        },
    },
    created() {
        // var datainfo = JSON.parse(window.sessionStorage.getItem('datainfo'))
        // var fileImgCards = window.sessionStorage.getItem('fileImgCards')
        // if (fileImgCards != null) {
        //     this.fileImgCards = JSON.parse(fileImgCards)
        //     this.fileImgs = JSON.parse(fileImgCards)

        // }
        // this.fileImgList = this.$route.params.fileImgList
        // this.fileImgCards = this.$route.params.fileImgCards

        // console.log(datainfo, this.$route.params.fileImgList)
    },
    activated() {
        // if (!this.$route.meta.isBack) {
        // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据 this.getData();
        this.fileImgList = this.$route.params.fileImgList
        // this.fileImgCards = this.$route.params.fileImgCards
        console.log(this.$route.params.fileImgList)
        // }
        // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据 this.$route.meta.isBack=false

    },

}
</script>
  
<style lang="less" scoped>
.loading {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
  